<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>主页</title>
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Sans+SC:100,300,400,500,700,900">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Noto+Serif+SC:200,300,400,500,600,700,900">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.slim.min.js"></script>
    <link rel="stylesheet" href="./assets/style.css">

</head>
<body>
<div id="app">
    <!-- 个人信息 -->
    <div class="self">
        <h3><div style="font-family: 'Arial'; font-weight: bold;">高考情况个人信息</div></h3>
        <div>
            <div class="selfLine"><span>姓名:</span>&nbsp;<span>{{users.name}}</span></div>
            <div class="selfLine"><span>个人省份:</span>&nbsp;<span>山东</span></div>
            <div class="selfLine"><span>科目组合:</span>&nbsp;<span>{{users.type}}</span></div>
            <div class="selfLine"><span>高考总分:</span>&nbsp;<span>{{users.score}}</span></div>
            <div class="selfLine"><span>全省排名:</span>&nbsp;<span>{{users.ranks}}</span></div>
        </div>
        <div class="selfLine" style="margin: 10px 0px;">
            <button class="btn-primary" style=" border-radius: 8px; width: 92px;" @click="location.href='./userUpdate.html'">修改信息</button>&nbsp;&nbsp;
            <button class="btn-primary" style=" border-radius: 8px; width: 92px;" @click="goOffline()">退出登录</button>
        </div>
        <div class="selfLine"><button class="btn-primary" style=" border-radius: 8px; width: 200px;"
                                      href="pages/recommend.html">开始智能志愿推荐</button></div>
    </div>
    <!-- 固定导航栏 -->
    <div class="container">
        <div class="row nav upnav">
            <div class="col-lg-4"><h1><div style="font-family: 'Arial';">山东省高考志愿系统</div></h1></div>
            <div class="col lg-4"></div>
            <div class="col-lg-3 seacher"><input type="text" placeholder="输入院校或专业"><button class="btn">搜索</button></div>
        </div>
        <div class="row nav botnav">
            <div class="col-lg-2"></div>
            <div class="col-lg-8  row">
                <div class="col-lg-2">
                    <a href="#" style="font-weight: bold; color: rgb(57, 83, 131);">
                        首页
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="universities.html">
                        院校查找
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="./majors/majors.html">
                        专业查找
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="recommend.html">
                        志愿推荐
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="ranking.html">
                        大学排行
                    </a>
                </div>
                <div class="col-lg-2">
                    <a href="javascript:;" @click="toAdmin()">
                        管理员
                    </a>
                </div>
            </div>
        </div>
    </div>
    <!-- banner -->
    <div class="banner">
        <div class="container-fluid" style="padding: 0%;">
            <img src="./img/banner.png" class="d-block w-100">
        </div>
    </div>

    <!-- 推荐院校 -->
    <div class="container">
        <div><span class="yxtuijian">院校推荐</span><span class="loi">山东 物/化/生532分</span></div>

        <div class="row yxtuijianjt">
            <div class="col-lg-2"></div>
            <div class="col-lg-8  row">
                <div class="col-lg-3">
                    <div><img src="./img/sdjz.jpg" class="schoolimg"></div>
                    <div class="schoolName">山东建筑大学</div>
                    <div class="schoolRegion">山东省</div>
                </div>
                <div class="col-lg-3">
                    <div><img src="./img/qh.jpg" class="schoolimg"></div>
                    <div class="schoolName">清华大学</div>
                    <div class="schoolRegion">北京市</div>
                </div>
                <div class="col-lg-3">
                    <div><img src="./img/bj.jpg" class="schoolimg"></div>
                    <div class="schoolName">北京大学</div>
                    <div class="schoolRegion">北京市</div>
                </div>
                <div class="col-lg-3">
                    <div class="imgwarp"><img src="./img/nj.jpg" alt="" class="schoolimg"></div>
                    <div class="schoolName">南京大学</div>
                    <div class="schoolRegion">南京市</div>
                </div>
            </div>
        </div>
    </div>

    <!-- 热门资讯 -->
    <div class="container tuiguang">
        <div><span class="yxtuijian">热门资讯</span><span class="rmzxr"><a href="#">查看更多>>></a></span></div>
        <div class="rmzx">
            <div class="tuiguang1">
                <span><img src="./img/tuijian1.png" class="tuijian"></span>
                <span class="rmzxleixing">政策速递</span>
                <span><a href="https://storage-oss.ipin.com/oss-data/article202110111414054212624.html">山东省医学生公费教育实施办法</a></span>
                <span class="tuiDate">2021-10-11</span>
            </div>
            <div class="tuiguang1">
                <span><img src="./img/rmzx2.jpg" class="tuijian"></span>
                <span class="rmzxleixing">开学路径</span>
                <span><a href="https://storage-oss.ipin.com/oss-data/article202110081140375812620.html">探索拔尖人才培养的中国方案</a></span>
                <span class="tuiDate">2021-10-9</span>
            </div>
            <div class="tuiguang1">
                <span><img src="./img/rmzu3.jpg" class="tuijian"></span>
                <span class="rmzxleixing">专业解读</span>
                <span><a href="https://storage-oss.ipin.com/oss-data/article202110081135247622619.html">数学: 自然科学之基础</a></span>
                <span class="tuiDate">2021-10-11</span>
            </div>
            <div class="tuiguang1">
                <span><img src="./img/rmzx4.jpg" class="tuijian"></span>
                <span class="rmzxleixing">专业解读</span>
                <span><a href="https://storage-oss.ipin.com/oss-data/article202110081134063042618.html">信息与计算科学：“数学+计算机”挖掘数据开发新高地</a></span>
                <span class="tuiDate">2021-10-8</span>
            </div>
        </div>

    </div>

    <!-- footer -->
    <div class="footer container">
        <div class="footertext">
            <div>项目经理: 李永琪</div>
            <div>邮箱: 1250025948@qq.com</div>
            <div>团队成员: 王兴胜 周经纬 刘宇航</div>
        </div>
    </div>
</div>

</body>
</html>

<script src="js/vue.js"></script>
<script src="js/axios.min.js"></script>
<script>
    const app = new Vue({
        el:'#app',
        data:{
            users:{},
            showGroup:false,
            role:'',

        },
        methods:{
            goOffline(){
                const storage = window.localStorage;
                storage.setItem("online","off");
                storage.setItem("userid",'');
                storage.setItem("role","user")
                alert("登出成功, 点击进入登陆页面")
                location.href='login.html';
            },
            findUserById(id){
                axios.get("http://localhost:8080/users/getUsersById?id="+id).then((res)=>{
                    console.log(res.data)
                    this.users = res.data;
                });
            },
            getUsersRoleById(){
                //这个bug为什么突然好了?? 我改了哪里????
                axios.get("http://localhost:8080/users/getUsersRoleById?id="+window.localStorage.getItem("userid").toString())
                    //这个地方 我不知道为啥 如果参数是 this.users.id 那就是 undefined, 只能这样
                    .then((res)=>{
                        // console.log("返回值是 "+res.data)
                        // console.log(this.users)
                        if(res.data===1) {
                            // console.log("此处res.data===1")
                            this.role = "administrator";
                            // console.log("经过赋值 this.role 是 "+this.role.toString())
                        }else {this.role = "user";}
                        window.localStorage.setItem("role",this.role)
                    })
            },
            toAdmin(){
                if(window.localStorage.getItem("role") === 'administrator') location.href='admin/user.html';
                else alert("非管理员 无授权进入管理员界面!")
            }
        },
        created(){
            if(window.localStorage.getItem("online")!=="on"){
                window.location='login.html';
            }else {
                // console.log(window.localStorage.getItem("role").toString())
                // console.log(window.localStorage.getItem("userid").toString());
                this.findUserById(window.localStorage.getItem("userid").toString());
                this.getUsersRoleById();
                // console.log("用户角色是 "+window.localStorage.getItem("role"))
                // console.log("this.role 是 "+this.role.toString())
                this.showGroup = window.localStorage.getItem("role") === "administrator";
            }
        }
    })
</script>
